﻿@{
    ViewBag.Title = "潮位预报";
    Layout = "~/Views/Shared/_LayoutIndexSearch.cshtml";
}
<link href="~/Content/Scripts/bootstrapPlugin/bootstrap-table-plugin/fixed-columns/css/bootstrap-table-fixed-columns.css" rel="stylesheet" />
<link href="~/Content/Scripts/bootstrapPlugin/bootstrap-table-develop/dist/bootstrap-table.css" rel="stylesheet" />
<script src="~/Content/Scripts/bootstrapPlugin/bootstrap-table-develop/dist/bootstrap-table.js"></script>
<script src="~/Content/Scripts/bootstrapPlugin/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>
<script src="~/Content/Scripts/bootstrapPlugin/bootstrap-table-plugin/fixed-columns/js/bootstrap-table-fixed-columns.js"></script>
<style>
    table th {
        width: 100px;
    }
</style>
<script type="text/javascript">
    $(function() {
        $("#searchOptionDiv").empty();
        addSearchSeclected("selectYear", "年份");
        addSearchSeclected("selectTyphoon", "台风");
        addSearchSeclected("selectPlan", "计算方案");

        $('#table').bootstrapTable({
            //search: true,
            //toolbar: '.toolbar',
            fixedColumns: true,
            fixedNumber:1,
            columns: [{
                field: 'stnm',
                title: '站名'
            }, {
                field: 'high',
                title: '预报最高'
            }, {
                field: 'time',
                title: '时间'
            }, {
                field: 'price',
                title: '超警(m)'
            }, {
                field: 'warning',
                title: '警戒值(m)'
            }],
            data: [{
                stnm: "双溪口水库",
                high:"60",
                time: '2018年3月8日',
                price: "30",
                warning:"50"
            }, {
                stnm: "双溪口水库",
                high: "60",
                time: '2018年3月8日',
                price: "30",
                warning: "50"
            }]
        });


    });

    function addSearchSeclected(id, name) {
        var s = '<div id={id} class="ui-form-item ui-border-b" style="padding: 5px"><div class="row"><label class="col-xs-3" style="text-align: right;' +
            ' padding-top: 8px; position: inherit; align-content: center;">{name}</label><div class="col-xs-9"><select id="selectedStationName"' +
            ' class="combobox form-control" name="horizontal" required="required" style="background-color: #eee"><option value="1" selected="selected">双溪口</option>' +
            '<option value="2">水库</option></select></div></div></div>';
        s = s.replace(/{id}/, id).replace(/{name}/, name);
        var stationSearch = $(s);
        $("#searchOptionDiv").append(stationSearch);
    }

</script>
<table id="table" data-height="400" style="min-width: 600px"></table>

@*<table class="table table-striped table-bordered table-hover">
    <tr class="tab-pane">
        <th class="col-xs-2">站名</th>
        <th class="col-xs-3">预报最高</th>
        <th class="col-xs-3">时间</th>
        <th class="col-xs-2">超警<br />(m)</th>
        <th class="col-xs-2">警戒值<br />(m)</th>
    </tr>
    <tr>
        <td>
            <a href='/TideForecast/Detail'>双溪口水库</a>
        </td>
        <td>50</td>
        <td>2018-05-06</td>
        <td>30</td>
        <td>30</td>
    </tr>
</table>*@